<!DOCTYPE html>
<html  lang="zh" xmlns:th="http://www.thymeleaf.org">

<head>
    <!-- 避免IE使用兼容模式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="renderer" content="webkit">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>必去景点</title>

    <!-- Bootstrap -->
    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script th:src="@{/js/jquery-3.3.1.js}"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script th:src="@{/js/bootstrap.min.js}"></script>

    <link rel="stylesheet" th:href="@{/css/header.css}">
    <link rel="stylesheet" th:href="@{/css/jingdian.css}">
    <link rel="stylesheet" th:href="@{/css/common.css}">

    <!-- 浏览器图标 -->
    <link rel="icon" href="img/icon/favicon.ico">
    <!--Ajax获取分页数据-->
    <script>
        $(function () {
            load(1,5);
        });

        function load(currentPage,pageSize) {
            $.get("/jing/queryByPage",{currentPage:currentPage,pageSize:pageSize},function (data) {
                //解析pageBean数据并在页面上展示
                var pageBean=data;//解析JSON
                //1.分页的工具条数据展示
                $("#totalPage").html(pageBean.pages);
                $("#totalCount").html(pageBean.total);

                //1.1 显示分页页码
                var page_lis="";
                var  firstPage='<li onclick="javascript:load(1,5)"><a href="javascript:void(0)">首页</a></li>';
                //计算上一页
                var  beforeNum=currentPage-1;
                if (beforeNum <= 0) {
                    beforeNum=1;
                }
                var beforePage='<li class="threeword"  onclick="javascript:load('+beforeNum+',5)"><a href="javascript:void(0)">上一页</a></li>';
                page_lis+=firstPage;
                page_lis+=beforePage;

                //1.2 最多显示10个页码
                //定义开始位置 begin 结束位置 end
                var begin;
                var end;

                if (pageBean.pages<10){
                    //总页数小于10
                    begin=1;
                    end=pageBean.pages;
                } else {
                    //总页数超过10
                    begin=pageBean.current-5;
                    end=pageBean.current+4;

                    if (begin<1){//开始小于1
                        begin=1;
                        end=begin+9;
                    }

                    if (end > pageBean.pages) {//结束位置大于总页数
                        end=pageBean.pages;
                        begin=end-9;
                    }
                }

                for (var i = begin; i <=end ; i++) {//遍历写入
                    var li;
                    //如果是当前页，加class属性
                    if (pageBean.current==i) {//判断是不是当前页按钮
                        li='<li class="curPage" onclick="javascript:load('+i+','+5+');"><a href="javascript:void(0)">'+i+'</a></li>';
                    } else {
                        li='<li onclick="javascript:load('+i+','+5+');"><a href="javascript:void(0)">'+i+'</a></li>';
                    }
                    page_lis+=li;
                }
                //尾页
                var lastPage='<li onclick="javascript:load('+pageBean.pages+',5)"><a href="javascript:void(0);">末页</a></li>'
                //计算下一页
                var nextNum=currentPage+1;
                if(nextNum>=pageBean.pages){
                    nextNum=pageBean.pages;
                }

                var nextPage='<li class="threeword" onclick="load('+nextNum+',5)"><a href="javascript:void(0);">下一页</a></li>';
                page_lis+=nextPage;
                page_lis+=lastPage;
                $("#pageNum").html(page_lis);

                //遍历展示景点数据
                var lis="";
                for(var i in pageBean.records) {
                    var record=pageBean.records[i];
                    var li='<li>' +
                        '<div class="img"><img src="'+record.images[record.images.length-1].src+'" alt="" class="img-responsive"/></div>\n' +
                        '                            <div class="text1">\n' +
                        '                                <p>'+record.jname+'</p>\n' +
                        '                                <br/>\n' +
                        '                                <p>'+record.position+'</p>\n' +
                        '                            </div>\n' +
                        '                            <div class="price">\n' +
                        '                                    <p>开始时间：'+record.otime+'</p>\n' +
                        '                                     <p>关闭时间：'+record.ctime+'</p>\n' +
                        '                                <a href="/detail/jing/'+record.jid+'" class="btn btn-primary btn-sm" role="button">查看详情</a>\n' +
                        '                            </div></li>';
                    lis+=li;
                }
                $("#route").html(lis);
            });
        }
    </script>

    <script>
        $(function () {//获取表单并跳转
            $("#btn").click(function () {
                var key=$("#ipt").val();
                var url="/searchDetail/"+key;
                location.href=url;
            });
        });
    </script>
    <!-- Favicon -->
    <link rel="icon" th:href="@{/img/icon/favicon.ico}">
</head>
<body>
<!--thymeleaf导入页面顶端模板-->
<div th:insert="~{header :: copy}"></div>

<div class="container">
    <div class="page_one">
        <div class="contant">
            <div class="crumbs">
                <img th:src="@{/img/local.png}" alt="">
                <p><a href="/">商丘旅游</a>><span>必去景点</span></p>
            </div>
            <div class="xinxi clearfix">
                <div class="left">
                    <div class="header">
                        <span>景点信息</span>
                        <span class="jg">详情</span>
                    </div>
                    <ul id="route">
                        <!--ajax 填充-->
                    </ul>
                    <div class="page_num_inf">
                        <i></i> 共
                        <span id="totalPage"></span>页<span id="totalCount"></span>条
                    </div>
                    <div class="pageNum">
                        <ul id="pageNum">
                            <li><a href="javascript:load(1,5)">首页</a></li>
                            <li class="threeword"><a href="#">上一页</a></li>
                            <li><a href="javascript:load(1,5)">1</a></li>
                            <li><a href="javascript:load(2,5)">2</a></li>
                            <li><a href="javascript:load(3,5)">3</a></li>
                            <li><a href="javascript:load(4,5)">4</a></li>
                            <li><a href="javascript:load(5,5)">5</a></li>
                            <li><a href="javascript:load(6,5)">6</a></li>
                            <li><a href="javascript:load(7,5)">7</a></li>
                            <li><a href="javascript:load(8,5)">8</a></li>
                            <li><a href="javascript:load(9,5)">9</a></li>
                            <li><a href="javascript:load(10,5)">10</a></li>
                            <li class="threeword"><a href="javascript:;">下一页</a></li>
                            <li class="threeword"><a href="javascript:;">末页</a></li>
                        </ul>
                    </div>
                </div>
                <div class="right">
                    <div class="top">
                        <div class="hot">HOT</div>
                        <span>热门推荐</span>
                    </div>
                    <ul style="padding-left: 0px">
                        <a th:each="jiudianImg:${@img.queryAll(jiudianImage)}" th:href="${jiudianImg.href}">
                            <li>
                                <div class="left"><img th:src="${jiudianImg.src}" class="img-responsive" alt=""></div>
                                <div class="right">
                                    <p th:text="${jiudianImg.title}">商丘汇美酒店...</p>
                                </div>
                            </li>
                        </a>
                    </ul>
                </div>
            </div>
        </div>
    </div>

</div>


<div th:insert="~{footer :: copy}"></div>
</body>
</html>
